<script setup lang="ts">
import Search from "@/views/inspection-plan/line/components/Widgets/Search/index.vue";
import Detail from "@/views/inspection-plan/line/components/Widgets/Detail/index.vue";
import InfoList from "@/views/inspection-plan/line/components/Widgets/InfoList/index.vue";
import { useMapStore } from "@/store";
import { ref } from "vue";
import { useLocalStore } from "@/views/inspection-plan/line/store";
import LayerManager from "@/views/inspection-plan/line/components/Widgets/LayerManager/index.vue";
import Tool from "@/views/inspection-plan/line/components/Widgets/Tool/index.vue";
import Legend from "@/views/inspection-plan/line/components/Widgets/Legend/index.vue";
const emits = defineEmits(["open"]);
defineProps({
  deviceCategoryList: Object,
});
const mapStore = useMapStore();
const localStore = useLocalStore();
const isShowNewDialog = ref(false);
const isShowInfoList = ref(false);
const isShowLayerManager = ref(false);
const isShowLegend = ref(false);
const { editingInspectionRoute } = storeToRefs(mapStore);
const toggleShowLayerManager = () => {
  isShowLayerManager.value = !isShowLayerManager.value;
};
const closeDetailDialog = () => {
  isShowNewDialog.value = false;
  localStore.setJsonLine(null);
  mapStore.setEditingInspectionRoute(null);
};
const toggleShowLegend = () => (isShowLegend.value = !isShowLegend.value);
function f_OpenLayerManager() {
  emits("open");
}
watchEffect(() => {
  if (editingInspectionRoute.value) {
    isShowNewDialog.value = true;
  }
});
</script>

<template>
  <Search :store="localStore" />
  <div class="options">
    <div class="bg-blue" @click="f_OpenLayerManager">图层</div>
    <!-- <div class="bg-blue" @click="toggleShowLayerManager">图层</div> -->
    <div class="bg-blue" @click="isShowNewDialog = true">新增</div>
    <div class="bg-blue" @click="isShowInfoList = !isShowInfoList">
      巡检路线
    </div>
  </div>
  <Detail
    v-if="isShowNewDialog"
    :editor="!!editingInspectionRoute"
    :route="editingInspectionRoute"
    @close="closeDetailDialog"
  />
  <InfoList
    v-if="isShowInfoList"
    :setAreaTypeId="mapStore.setAreaTypeId"
    @close="isShowInfoList = !isShowInfoList"
  />
  <LayerManager
    v-if="isShowLayerManager"
    @toggle-show-layer-manager="toggleShowLayerManager"
  />
  <Tool @toggle-show-legend="toggleShowLegend" />
  <Legend
    v-if="isShowLegend"
    @toggle-show-legend="toggleShowLegend"
    :deviceCategoryList="deviceCategoryList"
  />
</template>

<style scoped lang="scss">
.options {
  position: absolute;
  top: 27px;
  right: 17px;
  z-index: 1000;
  display: flex;
  color: white;

  div {
    width: 65px;
    height: 65px;
    margin-left: 25px;
    line-height: 65px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
  }

  .bg-blue {
    font-size: 14px;
    background: #1990ff 100%;
  }

  .cluster-tips {
    margin: 0 0 0 25px;
    font-family: PingFangSC-bold, sans-serif;
    font-size: 20px;
    line-height: 65px;
    color: rgb(0 0 0 / 100%);
    text-align: left;
  }
}
</style>
